<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

*{ margin:0; padding:0;}
li{ list-style:none;}

li{ float:left; width:200px; border:1px #000 solid; margin:10px;}
li img{ width:200px;}
p{ height:20px; border-bottom:1px #333 dashed;}

#div1{ width:600px; border:1px #000 solid; height:300px; clear:both;}

.box1{ float:left; width:200px;}
.box2{ float:left; width:200px;}
.box3{ float:left; width:200px;}

#allMoney{float: right;}

</style>
<br />

<script>
	window.onload = function(){
		var aLi = document.getElementsByTagName('li');
		var oDiv = document.getElementById('div1');
		
		var obj={};//购物车中有没有该商品
		var allMoney = null;//总价
		var iNum = 0;
		//给所有的书绑定 开始拖拽的事件
		for (var i=0; i<aLi.length;i++) {
			//开始拖拽
			aLi[i].ondragstart = function(ev){
				var aP = this.getElementsByTagName('p');
				
				//设置数据
				ev.dataTransfer.setData('title', aP[0].innerHTML);//商品名称
				ev.dataTransfer.setData('money', aP[1].innerHTML);//商品价格
				
				//拖拽图片
				ev.dataTransfer.setDragImage(this, 0, 0);
			};
		}
		
		oDiv.ondragover= function(ev){
			//阻止默认事件
			ev.preventDefault();
		};
		
		oDiv.ondrop = function(ev){
			ev.preventDefault();
			
			var sTitle = ev.dataTransfer.getData('title');
			var sMoney = ev.dataTransfer.getData('money');
			
			if (!obj[sTitle]) {//购物车中没有这款商品
				var oP = document.createElement('p');
			
				//商品数量
				var oSpan = document.createElement('span');
				oSpan.className = 'box1';
				oSpan.innerHTML = 1;
				oP.appendChild(oSpan);
				
				//商品名称
				var oSpan = document.createElement('span');
				oSpan.className = 'box2';
				oSpan.innerHTML = sTitle;
				oP.appendChild(oSpan);
			
				//商品价格
				var oSpan = document.createElement('span');
				oSpan.className = 'box3';
				oSpan.innerHTML = sMoney;
				oP.appendChild(oSpan);
		
				oDiv.appendChild(oP);
				
				//标志
				obj[sTitle] = 1;
			}
			else
			{
				//alert(123);
				
				var box1 = document.getElementsByClassName('box1');
				var box2 = document.getElementsByClassName('box2');
				
				for (var i=0; i<box2.length; i++) {
					
					if (box2[i].innerHTML == sTitle) {
						box1[i].innerHTML =parseInt(box1[i].innerHTML) + 1;
					}
				}
			}
			
			//统计商品总价
			if (!allMoney) {
				allMoney = document.createElement('div');
				allMoney.id = 'allMoney';	
			}
			
			iNum += parseInt(sMoney);//总价格的 数值
			//价格内容
			allMoney.innerHTML = iNum + '￥';//dom

			
			oDiv.appendChild(allMoney);
		};
		
		
	};

</script>
</head>

<body>
<ul>
	<li draggable="true">
    	<img src="img1.jpg" />
        <p>javascript语言精粹</p>
        <p>40￥</p>
    </li>
    <li draggable="true">
    	<img src="img2.jpg" />
        <p>javascript权威指南</p>
        <p>120￥</p>
    </li>
    <li draggable="true">
    	<img src="img3.jpg" />
        <p>精通javascript</p>
        <p>35￥</p>
    </li>
    <li draggable="true">
    	<img src="img4.jpg" />
        <p>DOM编程艺术</p>
        <p>45￥</p>
    </li>
</ul>

<div id="div1">
	<!--
	<p>
		<span class="box1">1</span>
		<span class="box2">javascript语言精粹</span>
		<span class="box3">40￥</span>
	</p>
	<p>
		<span class="box1">1</span>
		<span class="box2">javascript权威指南</span>
		<span class="box3">40￥</span>
	</p>
	<div id="allMoney">80￥</div>
	-->
</div>
</body>
</html>
